<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 过渡</title>
    <script src="../static/js/jquery-3.3.1.js"></script>
    <style>
        p {
            height: 30px;
            font-size: 30px;
            font-weight: bolder;
            background-color: red;
            color: #fff;
            display: none;
        }
    </style>
</head>
<body>
    <p>这是一个jquery的过渡效果</p>
    <p>这是一个jquery的过渡效果</p>
    <p>这是一个jquery的过渡效果</p>
    <p>这是一个jquery的过渡效果</p>
    <p>这是一个jquery的过渡效果</p>
    <script>
        /*
        $('p').eq(0).fadeIn('slow',function () {
            $('p').eq(0).fadeOut('fast')
        })
        */
        $('p').eq(0).fadeIn('slow',function () {
            $('p').eq(1).fadeIn('slow',function () {
                $('p').eq(2).fadeIn('slow',function () {
                    $('p').eq(3).fadeIn('slow',function () {
                        $('p').eq(4).fadeIn('slow',function () {

                        })
                    })
                })
            })
        })

    </script>

    <style>
        #box {
            height: 120px;
            background-color: pink;
            position: relative;
        }

        #box > div {
            height: 30px;
            display: inline-block;
            width: 40px;
            background-color: orange;
            position: absolute;
        }

    </style>

    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script>
        $('#box>div').eq(0).css('top','0')
        $('#box>div').eq(0).css('left','-40px')
        $('#box>div').eq(1).css('top','30px')
        $('#box>div').eq(1).css('left','-40px')
        $('#box>div').eq(2).css('top','60px')
        $('#box>div').eq(2).css('left','-40px')
        $('#box>div').eq(3).css('top','90px')
        $('#box>div').eq(3).css('left','-40px')


        $('#box>div').eq(0).animate({'left':'100px','width':'+=100px','opacity':'0.5'},1000)
        $('#box>div').eq(1).animate({'left':'100px'},2000)
        $('#box>div').eq(2).animate({'left':'100px'},3000)
        $('#box>div').eq(3).animate({'left':'100px'},4000)




    </script>
</body>

</html>